<template>
  <div>
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="drawer"
      ref="drawer"
    >
      <div class="drawer__content">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item
            label="角色名称:"
            :label-width="formLabelWidth"
            prop="roleName"
          >
            <el-input
              v-model="form.roleName"
              autocomplete="off"
              placeholder="请输入角色名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色状态:" :label-width="formLabelWidth">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注内容"
              v-model="form.Description"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <div class="drawer__footer">
          <el-button @click="cancelForm" style="width: 45%">取 消</el-button>
          <el-button
            style="width: 45%"
            type="primary"
            @click="submit"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { AccessRole_post, AccessRole_put } from "@/api/business";
export default {
  name: "",
  data() {
    return {
      dialog: false,
      loading: false,
      title: "新增",
      form: {
        ManagementId: JSON.parse(localStorage.getItem("xmGlDetails")).Id,
        roleName: "",
        status: 1,
        Description: "",
      },
      formLabelWidth: "100px",
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "change" },
        ],
        status: [
          { required: true, message: "请输入角色状态", trigger: "change" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    show(data) {
      if (data) {
        this.title = "编辑";
        this.form = {
          ManagementId: data.ManagementId,
          id: data.Id,
          roleName: data.RoleName,
          status: data.Status,
          Description: data.Description,
        };
      } else {
        this.title = "新增";
      }
      this.dialog = true;
    },
    submit() {
      this.loading = true;
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.title == "新增") {
            var res = await AccessRole_post(this.form);
          } else {
            var res = await AccessRole_put(this.form);
          }

          if (res.data.status == 200) {
            this.loading = false;
            this.dialog = false;
            this.$refs.ruleForm.clearValidate();
            this.$emit("getData");
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    handleClose(done) {
      this.dialog = false;
      this.$emit("getData");
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      this.$emit("getData");
    },
  },
};
</script>

<style  scoped>
.drawer__footer {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 12px;
}
/deep/ .el-form-item__label {
  font-size: 15px;
}
</style>
